<template>
	<view class="container" @touchmove.stop.prevent="">
		<view class="navbar">
			<text class="nav-btn" @click="navigateBack">返回</text>
			<text class="nav-title">学生订单</text>
		</view>

		<uni-card v-for="(order, index) in orders.order" :key="index" :title="`${order.orderId}`"
			:sub-title="`支付方式：${order.payMethod}`" :extra="``" :thumbnail="avatar" @click="onClick(order)">
			<text class="uni-body">金额：{{ order.amount }}</text>
			<view class="line-break"></view>
			<text class="uni-body">司机编号：{{ order.driveId }}</text>
		</uni-card>


		<fui-dialog :show="show" title="提示" content="已经评价过这单了哦！" :buttons="buttons" @click="onTap"></fui-dialog>

		<ygc-comment ref="ygcComment" :placeholder="'发布评论'" @pubComment="pubComment"></ygc-comment>
	</view>
</template>

<script>
	import fuiDialog from "@/components/firstui/fui-dialog/fui-dialog.vue";
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	import store from '../../store/index';

	export default {
		components: {
			fuiDialog,
			ygcComment
		},
		data() {
			return {
				noworder: null,
				show: false,
				buttons: [{
					text: '确定',
					color: '#FF2B2B'
				}],
				orders: [],
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			};
		},
		mounted() {
			// 发起 HTTP 请求获取订单数据
			uni.request({
				url: 'http://localhost:8080/app/order/userOrder?uid=' + this.$store.state.userdata[1],
				method: 'GET',
				success: (res) => {
					// 请求成功，将数据赋值给orders数组
					this.orders = res.data;
					// console.log("ssss");
					// console.log(this.orders)
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			onClick(order) {
				console.log(order.hasEvaluate)
				if (order.hasEvaluate == 0) {
					this.noworder = order;
					this.$refs.ygcComment.toggleMask("show");
				} else {
					this.show = true;
				}
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			onTap() {
				this.show = false;
			},
			updateEvaluate() {
				console.log("inhere")

				const evaluate = {
					oid: this.noworder.orderId, // 订单ID
					status: 1 // 新的订单状态
				};
				// 使用uni.request方法发送PUT请求
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: 'http://localhost:8080/app/order/updateOrder', // 接口地址
					method: 'PUT', // 请求方法为PUT
					data: evaluate,
					success: (res) => {
						// 请求成功处理逻辑
						console.log('请求成功', res);
						this.noworder.hasEvaluate = 1;
					},
					fail: (err) => {
						// 请求失败处理逻辑
						console.error('请求失败', err);
					}
				});
			},
			pubComment(commentContent1) {

				this.$refs.ygcComment.toggleMask();
				this.$refs.ygcComment.content = '';
				// 构造评价数据对象
				const evaluateData = {
					driverId: this.noworder.driveId,
					orderId: this.noworder.orderId, // 订单ID
					uid: this.noworder.uid,
					serviceRating: commentContent1,

					// 其他评价数据，根据你的实际需求进行修改
					// 比如评分、评论内容等等
				};


				// 发起 POST 请求
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: 'http://localhost:8080/app/order/updateEvaluate', // 更新评价的接口地址
					method: 'POST',
					data: evaluateData, // 将评价数据作为请求体发送
					success: (res) => {
						console.log(res);
						// 请求成功的处理逻辑
						if (res.data.msg == "success") {
							// 更新评价成功
							uni.showToast({
								title: '评价成功',
								icon: 'success'
							});
							this.updateEvaluate();
						} else {
							// 更新评价失败
							uni.showToast({
								title: '评价失败，请稍后重试',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						// 请求失败的处理逻辑
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
						console.error('请求失败', err);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		overflow: hidden;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		/* 导航栏的高度 */
		background-color: #ffffff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.nav-btn {
		position: absolute;
		/* 绝对定位，相对于屏幕左边缘定位 */
		left: 10px;
		/* 左边距 */
		font-size: 16px;
		color: #333333;
	}

	.nav-title {
		flex-grow: 1;
		/* 让标题占据剩余空间，实现水平居中 */
		text-align: center;
		/* 文本居中 */
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}
</style>